<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">

            <el-form-item label="通知标题：" prop="cn_title">
                <el-col :span="8">
                    <el-input v-model="form.cn_title" placeholder="请输入通知标题"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="通知内容：" prop="cn_content">
                <el-col :span="24">
                    <div id="editorElement" style="text-align:left"></div>
                </el-col>
            </el-form-item>

            <el-form-item label="通知类型：" prop="cn_type">
                <el-col :span="15">
                    <el-radio v-model="form.cn_type" label="0" @change="noticeType">系统</el-radio>
                    <el-radio v-model="form.cn_type" label="1" @change="noticeType">个人</el-radio>
                </el-col>
            </el-form-item>
            <el-form-item v-if="memberData.length>0">
                <el-col :span="24">
                    <div class="memberBox">
                        <div class="memberList" v-for="item in memberData">
                            <div class="headerUrl">
                                <img :src="item.cm_header_url"/>
                            </div>
                            <el-checkbox-group v-model="memberArr">
                                <el-checkbox  :label="item.cm_id" :key="item.cm_id">{{item.cm_nickname}}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </el-col>
            </el-form-item>
            <el-form-item label="是否发送：" prop="cn_is_send">
                <el-col :span="15">
                    <el-radio v-model="form.cn_is_send" label="1" @change="noticeType">是</el-radio>
                    <el-radio v-model="form.cn_is_send" label="0" @change="noticeType">否</el-radio>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import E from 'wangeditor'

    export default {

        //数据源
        data() {
            return {
                memberArr:[],
                rules: {
                    cn_title: [
                        {required: true, message: '请输入通知标题', trigger: 'blur'}
                    ]
                },
            }
        },
        //初始化函数
        mounted() {
            this.initEditor()
            this.initData()
        },
        //计算属性
        computed: {
            ...mapState({
                form: state => state.EditInformModule.form,
                memberData: state => state.EditInformModule.memberData,
                oldMemberArr: state => state.EditInformModule.oldMemberArr,

            })
        },
        //组件方法
        methods: {
            // ...mapMutations()
            submitForm(form) {
                this.form.cn_mid = 0
                if (this.form.cn_type > 0) {
                    if (this.memberArr.length) {
                        this.form.cn_mid = this.memberArr
                    } else {
                        this.$myPop.WarningMessage("请选择对应人员！")
                        return
                    }
                }

                this.$refs[form].validate((valid) => {

                    if (valid) {
                        this.$myLoading.startLoading()
                        this.$http.postHttp(
                            this.$API.cmsUpdateNotice,
                            this.form,
                            rs => {
                                this.$myLoading.endLoading()
                                this.$myPop.SuccessMessage()
                                this.initData()
                            }
                        )
                    }

                })

            },

            initData() {
                this.$myLoading.startLoading()
                this.$http.getHttp(
                    this.$API.cmsGetNoticeInfo + "/cn_id/" + this.$route.query.cn_id,
                    rs => {

                        this.$store.commit('EditInformModule/updateForm', rs.noticeData[0])
                        if (this.form.cn_type == 1) {
                            this.getMember()
                        }
                        this.$store.commit('EditInformModule/updateOldMemberArr', rs.memberArr)
                        this.editor.txt.html(rs.noticeData[0].cn_content)
                        this.$myLoading.endLoading()
                    }
                )
            },
            initEditor() {

                //富文本初始化
                this.editor = new E("#editorElement")

                //获取富文本输入框内容
                this.editor.customConfig.onchange = (html) => {
                    this.form.cn_content = html
                }

                //如果使用富文本图片上传按钮的监听回调
                this.editor.customConfig.customUploadImg = (files, insert) => {

                    //阿里云OSS文件服务
                    var fileObj = files[0]
                    this.$myLoading.startLoading()
                    this.$http.Aliyun_uploadImageHttp(fileObj, rs => {
                        this.$myLoading.endLoading()
                        this.form.cn_content = this.form.cn_content + '<div><img src="' + rs + '" /></div>'
                        this.editor.txt.html(this.form.cn_content)
                    })

                }

                //使用富文本
                this.editor.create()

            },

            getMember() {
                console.log("???")
                this.$http.getHttp(
                    this.$API.cmsMemberSearch + "/cm_is_delete/0",
                    rs => {
                        console.log(rs)
                        this.$store.commit('EditInformModule/updateMemberData', rs.data)

                        var tempArr = [];
                        for (var i = 0; i < this.oldMemberArr.length; i++) {
                            tempArr.push(this.oldMemberArr[i].cm_id);
                        }
                        this.memberArr = tempArr;
                        // this.$store.commit('EditInformModule/updateMemberArr',tempArr)
                    }
                )

            },
            noticeType() {
                console.log(this.form.cn_type)
                if (this.form.cn_type == 0) {
                    this.clearMember();
                } else {
                    this.getMember();
                }
            },
            clearMember() {
                this.$store.commit('EditInformModule/updateMemberData', [])
                this.$store.commit('EditInformModule/updateMemberArr', [])
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
    .customFieldInput {
        width 100%
        height 40px
        background #eee
        margin-bottom 30px
        padding-left 20px
        box-sizing border-box
    }

    .fieldCommentHint {
        color red
    }

    .memberList {
        width 85px
        text-align center
        float left
        padding-left 30px
    }

    .memberList div, .memberList img, .memberBox {
        width 100%
    }

    .headerUrl {
        border-radius 50%
        overflow hidden
        height 85px
    }

    .hiddenText {
        width 85px
        overflow: hidden
        text-align center
        height 20px
        line-height 20px
        margin-top 10px
        text-overflow ellipsis;
        white-space nowrap;
        box-shadow 0 0 1px #4d4d4d
        border-radius 5px
    }
</style>